
<template>
    <div class="form-deal-container">
        <h2>表单处理</h2>
        <input :value="message" @change="updateMessage" />

        <!--用el-input 需要在data中定义message-->
        <!--<el-input v-model="message" @change="updateMessage" />-->

        <h2>
            <input v-model="name" />
        </h2>
    </div>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        computed: {
            //
//            ...mapState({
//                message: state => state.formObj.message
//            })

            message() {
                return this.$store.state.formObj.message;
            },
            name: {
                get() {
                    return this.$store.state.formObj.name;
                },
                set(value) {
                    this.$store.commit('formObj/updateName',value);
                }
            }
        },
        data() {
            return {
                //message: '',
            }
        },
        methods: {
            updateMessage(e) {
                //在fromObj必须设置namespaced为true
                this.$store.commit('formObj/increment',e.target.value);
            }
        }
    }
</script>

<style>
    .form-deal-container {

    }
</style>